// @ts-nocheck
import { Component } from 'react';
import { getPicture, reqCheck } from '@/services/captcha';
import { CSSTransition } from 'react-transition-group';
import { Spin } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import './ajcaptcha.css';
import { aesEncrypt } from '@/services/ase';
type VerifySlideFixedProps = {
  isShow: boolean;
  rawData?: any;
  verifyPointFixedChild: (data: any, rawData?: any) => void;
}
class VerifySlideFixed extends Component<VerifySlideFixedProps> {
  barAreaOffsetWidth = 0;
  barAreaLeft = 0;
  startLeft = null;
  startMoveTime = ''; //移动开始的时间
  endMovetime = ''; //移动结束的时间

  constructor(props) {
    super(props);
    this.state = {
      blockSize: {
        width: '50px',
        height: '50px',
      },
      setSize: {
        imgHeight: 200,
        imgWidth: 310,
        barHeight: 40,
        barWidth: 310,
      },
      backImgBase: '', // 验证码背景图片
      blockBackImgBase: '', // 验证滑块的背景图片
      backToken: '', // 后端返回的唯一token值
      tipsBackColor: '', //提示词的背景颜色
      secretKey: '', //后端返回的加密秘钥 字段
      captchaType: 'blockPuzzle',
      moveBlockBackgroundColor: 'rgb(255, 255, 255)',
      leftBarBorderColor: '',
      iconColor: '',
      moveBlockLeft: null,
      leftBarWidth: null,
      status: false, //鼠标状态
      isEnd: false, //是够验证完成
      passFlag: '',
      tipWords: '',
      text: '向右滑动完成验证',
    };
  }

  componentDidMount() {
    this.uuid();
    this.getData();
    this.init();
  }
  // 初始话 uuid
  uuid() {
    var s = [];
    var hexDigits = '0123456789abcdef';
    for (var i = 0; i < 36; i++) {
      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = '-';

    var slider = 'slider' + '-' + s.join('');
    var point = 'point' + '-' + s.join('');
    // 判断下是否存在 slider
    console.log(localStorage.getItem('slider'));
    if (!localStorage.getItem('slider')) {
      localStorage.setItem('slider', slider);
    }
    if (!localStorage.getItem('point')) {
      localStorage.setItem('point', point);
    }
  }
  init() {
    var _this = this;

    window.removeEventListener('touchmove', function (e) {
      _this.move(e);
    });
    window.removeEventListener('mousemove', function (e) {
      _this.move(e);
    });

    //鼠标松开
    window.removeEventListener('touchend', function () {
      _this.end();
    });
    window.removeEventListener('mouseup', function () {
      _this.end();
    });

    window.addEventListener('touchmove', function (e) {
      _this.move(e);
    });
    window.addEventListener('mousemove', function (e) {
      _this.move(e);
    });

    //鼠标松开
    window.addEventListener('touchend', function () {
      _this.end();
    });
    window.addEventListener('mouseup', function () {
      _this.end();
    });
  }
  getData() {
    getPicture({
      captchaType: this.state.captchaType,
      clientUid: localStorage.getItem('slider'),
      ts: Date.now(),
    }).then((res) => {

      console.log('res', res)
      if (res.data.data.repCode == '0000') {
        this.setState({
          backImgBase: res.data.data.repData.originalImageBase64,
          blockBackImgBase: res.data.data.repData.jigsawImageBase64,
          backToken: res.data.data.repData.token,
          secretKey: res.data.data.repData.secretKey,
        });
      }
      // 请求次数超限
      if (res.data.repCode == '6201') {
        this.setState({
          backImgBase: null,
          blockBackImgBase: null,
          leftBarBorderColor: '#d9534f',
          iconColor: '#fff',
          iconClass: 'icon-close',
          passFlag: false,
          tipWords: res.repMsg,
        });
        setTimeout(() => {
          this.setState({
            tipWords: '',
          });
        }, 1000);
      }
    });
  }
  refresh = () => {
    this.getData();
    this.setState({
      moveBlockLeft: '',
      leftBarWidth: '',
      text: '向右滑动完成验证',
      moveBlockBackgroundColor: '#fff',
      leftBarBorderColor: '#337AB7',
      iconColor: '#fff',
      status: false,
      isEnd: false,
    });
  };
  setBarArea = (event) => {
    let barAreaLeft = event && event.getBoundingClientRect().left;
    let barAreaOffsetWidth = event && event.offsetWidth;
    this.barAreaLeft = barAreaLeft;
    this.barAreaOffsetWidth = barAreaOffsetWidth;
  };

  start = (ev) => {
    const e = ev || window.event;
    if (!e.touches) {
      //兼容PC端
      var x = e.clientX;
    } else {
      //兼容移动端
      var x = e.touches[0].pageX;
    }
    this.startLeft = Math.floor(x - this.barAreaLeft);
    this.startMoveTime = +new Date();
    if (this.state.isEnd == false) {
      this.setState({
        text: '',
        moveBlockBackgroundColor: '#337ab7',
        leftBarBorderColor: '#337AB7',
        iconColor: '#fff',
        status: true,
      });
      this.text = '';
      e.stopPropagation();
    }
  };

  move = (ev) => {
    const e = ev || window.event;
    if (this.state.status && this.state.isEnd == false) {
      if (!e.touches) {
        //兼容PC端
        var x = e.clientX;
      } else {
        //兼容移动端
        var x = e.touches[0].pageX;
      }
      var bar_area_left = this.barAreaLeft;
      var move_block_left = x - bar_area_left; //小方块相对于父元素的left值
      //console.log('---move x--->', x, move_block_left);
      if (
        move_block_left >=
        this.barAreaOffsetWidth - parseInt(parseInt(this.state.blockSize.width) / 2) - 2
      ) {
        move_block_left =
          this.barAreaOffsetWidth - parseInt(parseInt(this.state.blockSize.width) / 2) - 2;
      }
      // if (move_block_left <= 0) {
      //   move_block_left = parseInt(parseInt(this.state.blockSize.width) / 2);
      // }

      if (move_block_left <= this.startLeft) {
        move_block_left = this.startLeft;
      }
      //console.log('---move--->', move_block_left - this.startLeft);
      //拖动后小方块的left值
      this.setState({
        moveBlockLeft: move_block_left - this.startLeft + 'px',
        leftBarWidth: move_block_left - this.startLeft + 'px',
      });
    }
  };

  end = () => {
    this.endMovetime = +new Date();
    var _this = this;
    //判断是否重合
    if (this.state.status && this.state.isEnd == false) {
      var moveLeftDistance = parseInt((this.state.moveBlockLeft || '').replace('px', ''));
      moveLeftDistance = (moveLeftDistance * 310) / parseInt(this.state.setSize.imgWidth);
      let data = {
        captchaType: this.state.captchaType,
        pointJson: this.state.secretKey
          ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.state.secretKey)
          : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
        token: this.state.backToken,
        clientUid: localStorage.getItem('slider'),
        ts: Date.now(),
      };
      reqCheck(data).then((res) => {
        if (res.data.data.repCode == '0000') {
          this.setState({
            isEnd: true,
            passFlag: true,
            tipWords: `${((this.endMovetime - this.startMoveTime) / 1000).toFixed(2)}s验证成功`,
          });
          setTimeout(async () => {
            this.setState({
              tipWords: '',
            });
            var captchaVerification = this.state.secretKey
              ? aesEncrypt(
                  this.state.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
                  this.state.secretKey,
                )
              : this.state.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 });
            await this.props.verifyPointFixedChild({ captchaVerification }, this.props.rawData);
            this.refresh();
          }, 1000);
        } else {
          this.setState({
            isEnd: true,
            moveBlockBackgroundColor: '#d9534f',
            leftBarBorderColor: '#d9534f',
            iconColor: '#fff',
            iconClass: 'icon-close',
            passFlag: false,
            tipWords: res.data.repMsg || '验证失败',
          });
          setTimeout(() => {
            this.refresh();
            this.setState({
              tipWords: '',
            });
          }, 1000);
        }
      });
      this.setState({
        status: false,
      });
    }
  };

  closeBox = () => {
    console.log('---closeBox----');
    this.props.verifyPointFixedChild(false);
  };

  render() {
    const {
      vSpace,
      barSize,
      showRefresh,
      transitionWidth,
      finishText,
      transitionLeft,
      imgSize,
      isShow,
    } = this.props;
    return (
      // 蒙层
      <div className="mask" style={{ display: isShow ? 'block' : 'none' }}>
        <div className="verifybox" style={{ maxWidth: parseInt(imgSize.width) + 30 + 'px' }}>
          <div className="verifybox-top">
            <div className="title_metnq">
              <p className="titleTop_metnq">安全验证</p>
              <p className="titleBold_metnq">请拖动下方滑块完成拼图</p>
            </div>
            <span className="verifybox-close" onClick={() => this.closeBox()}>
            </span>
          </div>
          <div className="verifybox-bottom" style={{ padding: '15px' }}>
            {/* 验证容器 */}
            <div style={{ position: 'relative' }} className="stop-user-select">
              <div
                className="verify-img-out"
                style={{ height: parseInt(this.state.setSize.imgHeight) + vSpace }}
              >
                <div
                  className="verify-img-panel"
                  style={{
                    width: this.state.setSize.imgWidth,
                    height: this.state.setSize.imgHeight,
                    textAlign: 'center',
                  }}
                >
                  {this.state.backImgBase ? (
                    <img
                      src={'data:image/png;base64,' + this.state.backImgBase}
                      alt=""
                      style={{ width: '100%', height: '100%', display: 'block' }}
                    />
                  ) : (
                    <Spin />
                  )}
                  <CSSTransition
                    in={this.state.tipWords.length > 0}
                    timeout={150}
                    classNames="tips"
                    unmountOnExit
                  >
                    <span
                      className={
                        this.state.passFlag
                          ? `${'verify-tips'} ${'suc-bg'}`
                          : `${'verify-tips'} ${'err-bg'}`
                      }
                    >
                      {this.state.passFlag ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
                      <p>{this.state.tipWords}</p>
                    </span>
                  </CSSTransition>
                </div>
              </div>
              <div
                className="verify-sub-block"
                style={{
                  width: Math.floor((this.state.setSize.imgWidth * 47) / 310) + 'px',
                  height: this.state.setSize.imgHeight,
                  top: '-' + vSpace + 'px',
                  backgroundSize: this.state.setSize.imgWidth + ' ' + this.state.setSize.imgHeight,

                  left: this.state.moveBlockLeft,
                  transition: transitionLeft,
                }}
              >
                {this.state.blockBackImgBase && (
                  <img
                    src={'data:image/png;base64,' + this.state.blockBackImgBase}
                    alt=""
                    style={{
                      width: '100%',
                      height: '100%',
                      display: 'block',
                    }}
                  />
                )}
              </div>
              <div className="slides-metnq">
                <div className="track-metnq" ref={(bararea) => this.setBarArea(bararea)}></div>
                <div
                  className="slider-metnq"
                  style={{
                    left: this.state.moveBlockLeft,
                    transition: transitionLeft,
                  }}
                  onTouchStart={(e) => this.start(e)}
                  onMouseDown={(e) => this.start(e)}
                >
                  <i></i>
                  <i></i>
                  <i></i>
                </div>
              </div>
              <div className="toolbox_metnq">
                <span className="refreshBtn_metnq" onClick={() => this.refresh()}></span>
              </div>
              {/*<div*/}
              {/*  className="verify-bar-area"*/}
              {/*  style={{*/}
              {/*    width: this.state.setSize.imgWidth,*/}
              {/*    height: barSize.height,*/}
              {/*    lineHeight: barSize.height,*/}
              {/*  }}*/}
              {/*  ref={(bararea) => this.setBarArea(bararea)}*/}
              {/*>*/}
              {/*  <span className="verify-msg">{this.state.text}</span>*/}
              {/*  <div*/}
              {/*    className="verify-left-bar"*/}
              {/*    style={{*/}
              {/*      width:*/}
              {/*        this.state.leftBarWidth !== undefined*/}
              {/*          ? this.state.leftBarWidth*/}
              {/*          : barSize.height,*/}
              {/*      height: barSize.height,*/}
              {/*      borderColor: this.state.leftBarBorderColor,*/}
              {/*      transaction: transitionWidth,*/}
              {/*    }}*/}
              {/*  >*/}
              {/*    <span className="verify-msg">{finishText}</span>*/}

              {/*    <div*/}
              {/*      className="verify-move-block"*/}
              {/*      onTouchStart={(e) => this.start(e)}*/}
              {/*      onMouseDown={(e) => this.start(e)}*/}
              {/*      style={{*/}
              {/*        width: barSize.height,*/}
              {/*        height: barSize.height,*/}
              {/*        backgroundColor: this.state.moveBlockBackgroundColor,*/}
              {/*        left: this.state.moveBlockLeft,*/}
              {/*        transition: transitionLeft,*/}
              {/*      }}*/}
              {/*    >*/}
              {/*      <i*/}
              {/*        className="verify-icon iconfont icon-right"*/}
              {/*        style={{ color: this.state.iconColor }}*/}
              {/*      />*/}
              {/*      <div*/}
              {/*        className="verify-sub-block"*/}
              {/*        style={{*/}
              {/*          width:*/}
              {/*            Math.floor((parseInt(this.state.setSize.imgWidth) * 47) / 310) + 'px',*/}
              {/*          height: this.state.setSize.imgHeight,*/}
              {/*          top: '-' + (parseInt(this.state.setSize.imgHeight) + vSpace) + 'px',*/}
              {/*          backgroundSize:*/}
              {/*            this.state.setSize.imgWidth + ' ' + this.state.setSize.imgHeight,*/}
              {/*        }}*/}
              {/*      >*/}
              {/*        <img*/}
              {/*          src={'data:image/png;base64,' + this.state.blockBackImgBase}*/}
              {/*          alt=""*/}
              {/*          style={{ width: '100%', height: '100%', display: 'block' }}*/}
              {/*        />*/}
              {/*      </div>*/}
              {/*    </div>*/}
              {/*  </div>*/}
              {/*</div>*/}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

VerifySlideFixed.defaultProps = {
  mode: 'fixed',
  vSpace: 0,
  imgSize: {
    width: '310px',
    height: '200px',
  },
  barSize: {
    width: '310px',
    height: '40px',
  },
  setSize: {
    imgHeight: 200,
    imgWidth: 310,
    barHeight: 0,
    barWidth: 0,
  },
};

export default VerifySlideFixed;
